<template>
	<!-- 横屏 -->
	<video src="https://tcwjdl.oss-cn-chengdu.aliyuncs.com/dtbj.mp4"
	autoplay 
	loop 
	class="bg-video" 
	object-fit="cover"
	:controls="false"
	:enable-progress-gesture="false"
	:show-play-btn="false"></video>
	<view class="content">
		<!-- 头像 -->
		<view class="header">
			<view class="lv">{{userInfo.level}}</view>
		</view>
		
		<!-- 昵称 -->
		<view class="nickname">
			{{ userInfo.nickname }}
		</view>
		
		<!-- 开始游戏 -->
		<view class="start-game" @click="startGame" v-if="!matchingShow">
			开始逃离
		</view>
		<view class="start-game" @click="stopGame" v-else>
			行动取消
		</view>
		
		<!-- 排队匹配 -->
		<view class="queue-matching" v-show="matchingShow">
			{{matching}} 逃出五角大楼
		</view>
		
		<!-- 右上角区域 -->
		<GameCurrency class="right-box"></GameCurrency>
		
		<!-- 世界聊天框组件 -->
		<WorldChatBox class="world-msg"></WorldChatBox>
		
		<!-- 工具栏 -->
		<ToolsBoxVue class="my-box"></ToolsBoxVue>
	</view>
	
</template>

<script>
	import audioManager from '@/utils/audioManager.js';
	import { getUserInfo } from '@/api/index'
	import WorldChatBox from "@/component/WorldChatBox.vue"
	import ToolsBoxVue from '@/component/ToolsBox.vue';
	/* 右上角区域 */
	import GameCurrency from "@/component/GameCurrency.vue";
	
	export default {
		data() {
			return {
				matching:"00:00",
				matchingShow:false,
				gameInterval:null,
				userInfo:{}
			}
		},
		components:{
			WorldChatBox,
			ToolsBoxVue,
			GameCurrency
		},
		onShow(){
			this.getUserInfoMethods();
		},
		//当页面加载完成触发
		mounted() {
			//调用
			this.getUserInfoMethods();
		},
		methods: {
			//获取个人信息
			getUserInfoMethods(){
				getUserInfo().then((data)=>{
					console.log("个人信息",data);
					this.userInfo = data.data;
				})
			},
			startGame(){
				let info = uni.getStorageSync("info");
				//进入游戏
				let json = {
					//房主
					ownerId: info.id,
					//队友
					oeammateId:""
				}
				//单独的等待websocket
				client.send("/app/UserQueue", {}, JSON.stringify(json));
				
				
				this.matchingShow = true;
				this.startTime();
				audioManager.playAudio("dt_btn",false);
				setTimeout(()=>{
					//播放bgm
					audioManager.playAudio("dt_bgm",true);
				},500);
				
			},
			stopGame(){
				this.matchingShow = false;
				clearInterval(this.gameInterval);
				audioManager.destroyAll();
				client.send("/app/UserQueueOut", {}, "");
				
			},
			startTime(){
				/* Minutes and seconds */
				var minutes = 0;
				var seconds = 0;
				this.gameInterval = setInterval(()=>{
					seconds ++;
					if(seconds == 60){
						seconds = 0;
						minutes ++;
					}
					let a,b;
					// 补0
					if(minutes<10){
						a = "0"+minutes;
					}else{
						a = minutes;
					}
					if(seconds<10){
						b = "0"+seconds;
					}else{
						b = seconds;
					}
					this.matching = a+":"+b;
				},1000);
			}
		}
	}
</script>

<style scoped>
.show-info{
	width: 100%;
	height: 100vh;
	background-color: black;
	color: #fff;
	text-align: center;
	line-height: 100vh;
	font-size: 25px;
}
.bg-video{
	width: 100%;
	height: 100vh;
}
.content{
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 99999;
	left: 0px;
	top: 0px;
	color: #fff;
}
.header{
	width: 60px;
	height: 60px;
	position: relative;
	left: 10px;
	top: 10px;
	border: 1px solid #ccc;
}
.lv{
	width: calc(100% - 2px);
	height: 10px;
	position: absolute;
	bottom: 5px;
	right: 2px;
	text-align: right;
	font-size: 12px;
}

.start-game{
	width: 180px;
	height: 60px;
	background-color: #07bc71;
	position: absolute;
	right: 5px;
	bottom: 5px;
	text-align: center;
	line-height: 60px;
	font-weight: bold;
	font-size: 20px;
	color: #013821;
	border: 1px solid #ccc;
}
.queue-matching{
	width: 200px;
	height: 25px;
	background-color: rgba(1, 56, 33, 0.7);
	position: absolute;
	top: 5px;
	left: calc((100% - 200px) / 2);
	text-align: center;
	line-height: 25px;
	font-size: 14px;
	border-radius: 7px;
	z-index: 999999;
}

.nickname{
	width: 130px;
	height: 20px;
	position: absolute;
	top: 10px;
	left: 75px;
	color: #fff;
	font-size: 12px;
}

.world-msg{
	position: fixed;
	bottom:75px;
	left: 5px
}
.my-box{
	position: fixed;
	bottom: 20px;
}
.right-box{
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 1px;
}
</style>